<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="content-type" content="no-cache, must-revalidate"/>
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>公告</title>
    <link href="/front/css/bootstrap.min.css" rel="stylesheet">
    <link href="/front/css/my.css" rel="stylesheet">
    <link href="/front/css/nav.css" rel="stylesheet">

    <style>
        #gonggao div{
            width: 100%;
            margin:0 auto;
        }

        #notice-box li {
            margin-bottom: 10px;
        }
        #view-notice-body img {
            width: 400px;
        }
        #view-notice-body iframe {
            width: 400px;
        }
        .nx-header-item{
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 80px;
            line-height: 80px;
            background-color: #eee;
        }
    </style>
</head>
<body>
<div id="gonggao">
    <div id="wrapper">
        <div class="container">
            <!-- 头部开始 -->
            <div class="nx-header">
                <div class="nx-header-item">
                    <div style="margin-left: 50px;">
                        <span style="font-size: 40px;color: #409EFF;font-family: 华文彩云">美食菜谱分享平台</span>
                    </div>
                    <div style="text-align: right">
                    <span v-if="user.name">
                    欢迎您，{{user.name}}
                    <a style="margin-right: 50px; color: blue" href="javascript:void(0)" @click="logout">退出</a>
                    </span>
                        <a v-if="!(user.name)" href="/end/page/login.html" target="_blank" style="margin-right: 10px; color: #666666">登录</a>
                        <a href="/end/page/register.html" target="_blank" style="margin-right: 30px; color: #666666">注册</a>
                    </div>
                </div>



                <div>
                    <ul style="display: flex; background-color: orange; height: 30px">
                        <li class="nav-item"><a href="index.html">首页</a></li>
                        <li class="nav-item"><a class="active" href="advertiserInfo.html">系统公告</a></li>
                        <li class="nav-item"><a href="foodsMenuInfo.html">菜谱</a></li>
                        <!--					<li class="nav-item"><a href="foodsMaterialInfo.html">食材</a></li>-->
                        <li class="nav-item"><a href="collectInfo.html">收藏</a></li>
                        <li class="nav-item"><a href="notesInfo.html">笔记</a></li>
                        <li class="nav-item"><a href="newsInfo.html">饮食资讯</a></li>
                        <li class="nav-item"><a href="messageInfo.html">趣味答题</a></li>

                        <li v-if="isShow" class="nav-item"><a href="/end/page/index.html" target="_blank">进入后台系统</a></li>
                    </ul>
                </div>

            </div>
            <!-- 头部结束 -->
        </div>
        <div class="container" style="margin-top: 10px">
            <div class="row">
                <div class="col-md-8">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <b>{{currentAdvertiser.name}}</b>
                            <span style="float: right; color: #888888">{{currentAdvertiser.time}}</span>
                        </div>
                        <div class="panel-body" id="view-notice-body" v-html="currentAdvertiser.content"></div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="panel panel-default" id="notice-box">
                        <div class="panel-heading"><b>公告列表</b></div>
                        <div class="panel-body">
                            <ul id="notice-item-box">
                                <li v-for="item in advertiserList">
                                    <a :href="'advertiserInfo.html?id=' + item.id"  v-bind:class="{active: item.isActive}">{{item.name}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--js库文件-->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/vue2.6.11/vue.min.js"></script>
<script src="js/vue2.6.11/axios.js"></script>

<script>
    new Vue({
        el: '#wrapper',
        data: {
            user: {},
            currentId: 0,
            isShow: false,
            advertiserList: [],
            currentAdvertiser: {}
        },

        created: function () {
            axios.get('/auth').then(res => {
                if (res.data.code === '0') {
                    this.user = res.data.data;
                    if (this.user.level !== 3) {
                        this.isShow = true;
                    }
                }
            });
            this.currentId = this.getQueryVariable('id');
            this.loadAdvertiserInfo();
        },

        methods: {
            loadAdvertiserInfo() {
                axios.get('/advertiserInfo/page/all?pageSize=10').then(res => {
                    if (res.data.code === '0') {
                        this.advertiserList = res.data.data.list;
                        this.advertiserList.forEach(item => {
                            if(parseInt(this.currentId) === item.id) {  // 当前选择的公告
                                item.isActive = true;
                                this.currentAdvertiser = item;
                            } else {
                                item.isActive = false;
                            }
                        })
                    }
                })
            },
            getQueryVariable(variable) {
                let query = window.location.search.substring(1);
                let vars = query.split("&");
                for (let i = 0; i < vars.length; i++) {
                    let pair = vars[i].split("=");
                    if (pair[0] === variable) {
                        return pair[1];
                    }
                }
                return '1';
            },
            logout() {
                axios.get("/logout").then(res => {
                    if(res.data.code === '0') {
                        location.href = '/front/index.html';
                    } else {
                        msg('error', res.data.msg);
                    }
                })
            }
        }
    })
</script>
</body>
</html>
